<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./js/axios.min.js"></script> -->
    <!-- 1. 通过CDN网络导入 axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <h1>axios请求库的使用</h1>
    <button>get请求-获取所有信息</button>
    <button>get请求-获取单条信息</button>
    <button>post请求-添加信息</button>
    <button>put请求-修改信息</button>
    <button>delete请求-删除信息</button>

    <script>
        // 获取上面的所有按钮
        const btns = document.querySelectorAll("button");

        // 对第一个按钮添加点击事件(对返回的promise对象使用then和catch处理)
        btns[0].onclick = function(){
           const res =  axios.get("http://localhost:3000/stu");
           console.log(res);
           res.then( value => {
                //console.log("请求成功",value);
                // 其中Ajax响应的数据：对象{status, statusText, headers, data}
                if(value.status == 200){
                    console.log(value.data);
                }
           }).catch(err => {
                console.log("请求失败",err);
           });
        }

        // 对第二个按钮添加点击事件(对返回的promise对象使用async和await处理)
        btns[1].onclick = async function(){
            try {
                const res = await axios.get("http://localhost:3000/stu/1");
                // console.log(res); // 此处相当于进入的then的成功回调
                if(res.status == 200){
                    console.log(res.data); // 获取响应的数据
                }
            } catch (error) {
                // 相当于进入了then失败回调，或catch回调
                console.log("Ajax请求失败！", error.message);
            }
           
        }

        // 第三个按钮事件： post 数据添加
        btns[2].onclick = async function(){
            try {
                const res = await axios({
                    url: "http://localhost:3000/stu",
                    method: "post",
                    data: {name:"白眉鹰王", age:46, sex:1, classid:'web1013'}
                });
                console.log(res); // 此处相当于进入的then的成功回调
            } catch (error) {
                // 相当于进入了then失败回调，或catch回调
                console.log("Ajax请求失败！", error.message);
            }
           
        }

        // 第四个按钮事件： put 数据修改
        btns[3].onclick = async function(){
            try {
                const res = await axios({
                    url: "http://localhost:3000/stu/6",
                    method: "put",
                    data: {name:"灭绝师太", age:50, sex:1, classid:'web1013'}
                });
                console.log(res); // 此处相当于进入的then的成功回调
            } catch (error) {
                // 相当于进入了then失败回调，或catch回调
                console.log("Ajax请求失败！", error.message);
            }
           
        }

        // 第五个按钮事件： delete 数据删除
        btns[4].onclick = async function(){
            try {
                const res = await axios({
                    url: "http://localhost:3000/stu/7",
                    method: "delete"
                });
                console.log(res); // 此处相当于进入的then的成功回调
            } catch (error) {
                // 相当于进入了then失败回调，或catch回调
                console.log("Ajax请求失败！", error.message);
            }
           
        }
    </script>
</body>
</html>